<template>
  <div class="tool" :style="y > 0 ? show : ''">
    <div class="item" v-if="commentShow(route.name)" @click="handleToComment">
      <svg-icon icon-class="comments" size="20px"></svg-icon>
    </div>
    <div class="item back-to-top" @click="handleBackToTop" style="margin-top: 10px">
      <svg-icon icon-class="up" size="14px"></svg-icon>
      <span class="count">{{ process }}%</span>
    </div>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/svgIcon/index.vue';
import { useEventListener, useScroll } from '@vueuse/core';
import { computed, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const process = ref(0);
const show = reactive({
  transform: 'translateX(-45px)',
});
const { y } = useScroll(window);
const commentList = ['article', 'friend', 'talkInfo'];
const commentShow = computed(() => (value) => commentList.includes(value));

useEventListener(document, 'scroll', () => {
  process.value = Number(
    ((window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight)) * 100).toFixed(0),
  );
});

const handleToComment = () => {
  document.getElementById('reply-wrap')?.scrollIntoView({
    block: 'start',
    inline: 'nearest',
    behavior: 'smooth',
  });
};
const handleBackToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
};
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin absolute {
  position: absolute;
  top: 0;
  left: 0;
}

.tool {
  position: fixed;
  right: -40px;
  bottom: 85px;
  z-index: 9;
  color: var(--primary-color);
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
  background: var(--grey-1-a3);
  transition: all 0.5s;

  .item {
    @include flex;

    flex-direction: column;
    width: 40px;
    padding: 10px 0 0;
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.2s ease-in-out 0s;

    .count {
      font-size: 0.75em;
    }

    &:hover {
      opacity: 0.9;
    }
  }
}
</style>
